<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
  >
    <!-- 内容 -->
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
    >
      <el-form-item label="请输入序号" prop="index">
        <el-input v-model.number="ruleForm.index"></el-input>
      </el-form-item>
      <el-form-item label="请输入药品编码" prop="code">
        <el-input v-model.number="ruleForm.code"></el-input>
      </el-form-item>
      <el-form-item label="请输入药品名称" prop="name">
        <el-select v-model="ruleForm.name" placeholder="请选择药品名称">
          <el-option label="头孢颗粒" :value="0"></el-option>
          <el-option label="vc银翘片" :value="1"></el-option>
          <el-option label="999感冒灵" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请输入药品规格" prop="regular">
        <el-input v-model="ruleForm.regular"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$parent.isShow = false">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { creasefun } from "../../../api/drug";
export default {
  data() {
    return {
      dialogVisible: true, //控制弹框显示或者隐藏
      ruleForm: {
        index: "",
        code: "",
        name: "",
        regular: "",
      },
      rules: {
        index: [
          { required: true, message: "请输入正确的序号", trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入药品编码", trigger: "blur" }],

        name: [
          {
            required: true,
            message: "请输入药品名称",
            trigger: "blur",
          },
        ],
        regular: [
          {
            required: true,
            message: "请输入规格",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //验证通过
          //发送请求 关闭弹框 刷新表格
          // console.log(this.ruleForm);
          creasefun(this.ruleForm).then((res) => {
            // console.log(res);
            if (res.code == 200) {
              this.$parent.getData(); //刷新表格
              alert("药品添加成功");
              this.$parent.isShow = false; //关闭弹框
            } else{
              alert('添加失败,请核实后输入')
            }
          });
        } else {
          //验证不通过
          // alert("验证不通过，请重新输入");
          return false;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.$parent.isShow = false;
        })
        .catch((_) => {});
    },
  },
};
</script>

<style></style>
